En la entrada anterior añadíamos con CSS efecto gradient a un texto, karla preguntaba si era posible añadir ese mismo efecto al título del blog y la respuesta es si.
Para conseguirlo nos situamos en plantilla edición de HTML y marcamos para expandir la plantilla, buscamos lo siguiente:

<b:includable id='title'>
<b:if cond='data:blog.url == data:blog.homepageUrl'>
<data:title/>
<b:else/>
<a expr:href='data:blog.homepageUrl'><data:title/></a>
</b:if>
</b:includable>

La etiqueta <data:title/> es la que genera el título del blog, las sustituimos por la siguientes líneas:

<div class='pattern'>
<h1><span/><data:title/></h1>
</div>

Quedaría así:

<b:includable id='title'>
<b:if cond='data:blog.url == data:blog.homepageUrl'>
<div class='pattern'>
<h1><span/><data:title/></h1>
</div>

<b:else/>
<a expr:href='data:blog.homepageUrl'>
<div class='pattern'>
<h1><span/><data:title/></h1>
</div></a>
</b:if>
</b:includable>

Guardamos los cambios y justo antes de ]]></b:skin> añadimos los estilos para el nuevo título:

.pattern {
background:none repeat scroll 0 0 #000000;
margin:30px 0 50px;
padding:30px 0 30px 30px;
}
.pattern h1 {
color:#FFFFFF;
font:bold 600%/100% "Lucida Grande",Arial,sans-serif;
letter-spacing:-6px;
margin:0;
position:relative;
text-transform:uppercase;
}
.pattern h1 span {
background:url("http://2.bp.blogspot.com/_q4j3j-JA2ro/TM9gocGt_pI/AAAAAAAAP7U/lK25C_cJqKQ/s0/pattern-zebra.png") repeat scroll 0 0 transparent;
display:block;
height:100px;
position:absolute;
width:100%;
}

Si en vista previa comprobamos que la imagen del gradient se visualiza fuera del bloque modificaremos la anchura en width de forma que el ancho sea menor que el que tenemos en header-wrapper.

.pattern h1 span {
background:url("http://2.bp.blogspot.com/_q4j3j-JA2ro/TM9gocGt_pI/AAAAAAAAP7U/lK25C_cJqKQ/s0/pattern-zebra.png") repeat scroll 0 0 transparent;
display:block;
height:100px;
position:absolute;
width:750px;
}

Cualquier modelo de gradient puede adaptarse al título del blog, bastará con añadir los estilos correspondientes y envolver la etiqueta <data:title/> con la misma clase.Ver ejemplo.

Maty

Hola Gema, gracias por todo tu trabajo, muy interesante, en cuanto tenga un rato, lo intento a ver como queda ;)

Responder
gab

wao que bien se te ve muy feliz, eso es bueno por algo es su momento mas precioso, que bien por ud. felicidades. Gracias por sus aportes

Responder
Karla Castañeda

:D Excelentísimo Gema!!

Mi error era que no agregaba la clase abajo, solamente la etiqueta span.

;):D Besitos para ti!

Responder
Karla Castañeda

Casi lo olvido:~Muchas gracias~ y que tengas un estupendo día!

Viva Gema ❣

Responder
Gem@

:: Me alegra que te guste Maty :)

:: Gracias por el comentario gab :)

:: Hola Karla, es necesario añadir la clase a la etiqueta que genera el título de lo contrario los estilos que muestra son los de header h1.
Suerte!!

Responder
Mr. Chapter

Gema ayer estube pensando en como subir los lectores en mi blog, con 12 años no voy a usar el dinero para estas cosas (anuncios en otras paginas) :S
Y pense en el intercambio de enlaces,las preguntas son:
¿Es legal?,¿Es malo?,¿hay ventajas y desventajas?
Gracias por adelantado.

Responder
Nadie

Hola! Pues voy a probar que es finde y tengo más tiempo, de todas formas llevo mucho tiempo queriendo cambiar la cabecera, quiero darle un poco de volumen¿Podré? jajaja

Responder
Gem@

:: Raúl me parece bien tu decisión, el intercambio de enlaces está penalizado por Google, en realidad penaliza cualquier tipo de publicidad que se haga si la finalidad es ganar popularidad.
Por eso algunos sitios incluido el mio advierten que la publicidad contiene la etiqueta nofollow, esa etiqueta hace que los buscadores no tengan en cuenta el enlace y por consiguiente no lo penalizan.
Es un tema muy amplio y hay diversidad de opiniones, para algunos es indiferente que les penalicen añadiendo que no dan importancia al PR cuando en realidad lo que se busca con el intercambio es eso, otros prefieren ceñirse a lo establecido y piensan que la popularidad se gana con el trabajo realizado no con intercambios.
Cuando se trata de nuestro blog nadie mejor que nosotros para decidir.

:: Y por qué no vas a poder Nadie?

Responder

Los comentarios han sido inhabilitados temporalmente. ¡GRACIAS!

:):'(:(:P:D:$;):-I:X:O|O:S

Nota: solo los miembros de este blog pueden publicar comentarios.

 


top